<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>elementui 学习</title>
    <script src="vue.js"></script>
    <script src="index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="index.css">
 <style>


 </style>

</head>
<body>
         <div id="app" >

             <el-form  ref="ruleForm" status-icon   :model="formdata"  :rules="rules" label-width="100px" class="demo-ruleForm">
                 <el-form-item label="用户名" prop="name">
                     <el-input v-model="formdata.name"></el-input>
                 </el-form-item>
                 <el-form-item label="密码" prop="password">
                     <el-input type="password" v-model="formdata.password"></el-input>
                 </el-form-item>

                 <el-form-item>
                     <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                     <el-button @click="resetForm('ruleForm')">重置</el-button>
                 </el-form-item>
             </el-form>

         </div>
                 <script>
                    var  vm = new Vue(
                        {
                            el:"#app",
                            data(){

                                var validateName = (rule, value, callback) => {
                                    if (value === '') {
                                        callback(new Error('请输入用户名'));
                                    } else {
                                        if (this.formdata.name !== '') {
                                            axios.get("main.html").then((res)=>{
                                                if(this.formdata.name.length==6){
                                                    callback();
                                                }else{
                                                    callback(new Error('用户名长度必须6位'));
                                                }
                                            })
                                        }

                                    }
                                };

                              return{
                                  formdata:{
                                      name:"",
                                      password:''
                                  },
                                  rules:{
                                      name: [
                                          { validator: validateName, trigger: 'blur' }
                                      ]
                                  }

                              }

                            },
                            methods: {
                                submitForm() {
                                    this.$refs['ruleForm'].validate((valid) => {
                                        if (valid) {
                                            axios.post("user/addUser.do",this.formdata).then((res)=>{

                                            })
                                        } else {
                                            console.log('error submit!!');
                                            return false;
                                        }
                                    });
                                },
                                resetForm(formName){
                                    // console.info(this)
                                    // console.info(this.$refs)
                                    this.$refs[formName].resetFields();
                                }

                            }
                        }
                    )
                 </script>
</body>
</html>